<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      :rowKey="record => record.id"
      :columns="columns"
      :data="loadData"
      :pagination="paginationProps"
      :scroll="{ x: 1300 }"
    >
      <span slot="action" slot-scope="record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定删除？" @confirm="handleDelete(record.id)">
          <a-icon slot="icon" type="question-circle-o" style="color: red" />
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </span>
    </s-table>
    <a-modal v-model="visible" title="版本记录" @ok="handleOk" @cancel="handleCancel">
      <a-form-model ref="rulesForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 17 }" :model="form" :rules="rules" >
          <a-form-model-item label="版本" prop="name">
            <a-input
              v-model="form.name"
              placeholder="请输入"
            />
          </a-form-model-item>
          <a-form-model-item label="版本内容" prop="content">
            <a-textarea
              v-model="form.content"
              placeholder="请输入"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import { queryPermissionVersionList, addPermissionVersion, editPermissionVersin, deletePermissionVersion} from '@/api/box/member.js'
import { STable } from '@/views/box/components'
const columns = [
  {
    title: '版本号',
    dataIndex: 'name',
    width: 100,
    align: 'center'
  },
  {
    title: '版本内容',
    dataIndex: 'content',
    width: 200,
    align: 'center'
  },
  {
    title: '更新日期',
    dataIndex: 'createTime',
    width: 100,
    align: 'center'
  },
  {
    title: '操作',
    align: 'center',
    fixed: 'right',
    width: 200,
    scopedSlots: { customRender: 'action' }
  }
];
export default {
  components: {
    STable
  },
  data() {
    return {
      columns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const data = {
          sysPermissionId: this.$route.params.id,
          ...parameter
        }
        return queryPermissionVersionList(data).then(res => {
          if (res.code === 0) {
            const {total, size, pages, current, records} = res.result
            const data = {
              page: {
                count: total,
                pageSize: size,
                pages: pages,
                pageNo: current
              },
              data: records
            }
            return data
          } else {
            this.$message.error(res.msg)
            const data = {
              page: {
                pageNo: 0
              },
              data: []
            }
            return data
          }
        })
      },
      isEdit: false,
      visible: false,
      form: {
        name: '',
        content: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
    handleAdd() {
      this.visible = true
    },
    handleOk() {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          const addAndEdit = this.isEdit ? editPermissionVersin : addPermissionVersion
          const data = {
            sysPermissionId: this.$route.params.id,
            ...this.form
          }
          addAndEdit(data)
            .then(res => {
              const { code, result, message } = res
              if (code == 200) {
                if (this.isEdit) {
                  this.$refs.table.refresh()
                } else{
                  this.$refs.table.refresh(true)
                }
                this.handleCancel()
              } else {
                this.$message.error(message)
              }
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    handleCancel() {
      this.visible = false
      this.$refs.rulesForm.resetFields();
      this.form = {}
      this.isEdit = false
    },
    handleEdit(item) {
      this.form = {...item}
      this.visible = true
      this.isEdit = true
    },
    handleDelete(id) {
      const data = {
        id
      }
      deletePermissionVersion(data)
        .then(res => {
          const { code, result, message } = res
          if (code == 200) {
            this.$refs.table.refresh()
          } else {
            this.$message.error(message)
          }
        })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
